<script setup lang="ts">
import DataTable from "@/views/baseconfig/datastatistics/components/PopularMarket.vue";

// 热门市场数据
const marketTitle = "热门市场（成交地区）";
const marketData = [
  { region: "地区A", rank: 1 },
  { region: "地区B", rank: 2 },
  { region: "地区C", rank: 3 },
  { region: "地区D", rank: 4 },
  { region: "地区E", rank: 5 },
  { region: "地区F", rank: 6 }
];
const marketColumns = [
  { prop: "region", label: "成交地区" },
  { prop: "rank", label: "排名" }
];

// 货代成交率数据
const dealRateTitle = "货代成交率（总成交率：23%）";
const dealRateData = [
  {
    name: "货代1",
    quoteCount: 1,
    dealCount: 1,
    dealRate: "1%"
  },
  {
    name: "货代2",
    quoteCount: 2,
    dealCount: 2,
    dealRate: "2%"
  },
  {
    name: "货代3",
    quoteCount: 3,
    dealCount: 3,
    dealRate: "3%"
  },
  {
    name: "货代4",
    quoteCount: 4,
    dealCount: 4,
    dealRate: "4%"
  },
  {
    name: "货代5",
    quoteCount: 5,
    dealCount: 5,
    dealRate: "5%"
  },
  {
    name: "货代6",
    quoteCount: 6,
    dealCount: 6,
    dealRate: "6%"
  }
];
const dealRateColumns = [
  { prop: "name", label: "货代名称" },
  { prop: "quoteCount", label: "报价次数" },
  { prop: "dealCount", label: "成交次数" },
  { prop: "dealRate", label: "成交率" }
];
//供货商成交率
const supplierTitle = "供货商成交率（总成交率:23%)";
const supplierData = [
  {
    name: "供货商1",
    quoteCount: 1,
    dealCount: 1,
    dealRate: "1%"
  },
  {
    name: "供货商2",
    quoteCount: 2,
    dealCount: 2,
    dealRate: "2%"
  },
  {
    name: "供货商3",
    quoteCount: 3,
    dealCount: 3,
    dealRate: "3%"
  },
  {
    name: "供货商4",
    quoteCount: 4,
    dealCount: 4,
    dealRate: "4%"
  },
  {
    name: "供货商5",
    quoteCount: 5,
    dealCount: 5,
    dealRate: "5%"
  },
  {
    name: "供货商6",
    quoteCount: 6,
    dealCount: 6,
    dealRate: "6%"
  }
];
const supplierColumns = [
  { prop: "name", label: "供货商" },
  { prop: "quoteCount", label: "报价次数" },
  { prop: "dealCount", label: "成交次数" },
  { prop: "dealRate", label: "成交率" }
];
//产品销量排行
const productSalesTitle = "产品销量排行";
const productSalesColumns = [
  { prop: "rank", label: "排名" },
  { prop: "name", label: "产品名称" },
  { prop: "createAt", label: "创建时间" },
  { prop: "sales", label: "销量" },
  { prop: "allSales", label: "总销售金额" }
];

const productSalesData = [
  {
    rank: 1,
    name: 2131,
    createAt: "2025-1-1",
    sales: 263,
    allSales: 6666666
  },
  {
    rank: 2,
    name: 2133,
    createAt: "2025-1-1",
    sales: 266,
    allSales: 6666666
  },
  {
    rank: 3,
    name: 2133,
    createAt: "2025-1-1",
    sales: 266,
    allSales: 6666666
  }
];
//销售品类（产品分类）
const productCategoryTitle = "销售品类（产品分类）";
const productCategoryColumns = [
  { prop: "rank", label: "排名" },
  { prop: "name", label: "产品名称" },
  { prop: "createAt", label: "创建时间" },
  { prop: "sales", label: "销量" },
  { prop: "allSales", label: "总销售金额" }
];
const productCategoryData = [
  {
    rank: 1,
    name: 2131,
    createAt: "2025-1-1",
    sales: 263,
    allSales: 6666666
  },
  {
    rank: 2,
    name: 2133,
    createAt: "2025-1-1",
    sales: 266,
    allSales: 6666666
  },
  {
    rank: 3,
    name: 2133,
    createAt: "2025-1-1",
    sales: 266,
    allSales: 6666666
  }
];
</script>

<template>
  <div>
    <el-text size="large" type="primary">数据统计</el-text>
    <br />
    <br />
    <!-- 热门市场 -->
    <DataTable
      :title="marketTitle"
      :table-data="marketData"
      :columns="marketColumns"
      style="display: inline-block"
    />

    <!-- 货代成交率 -->
    <DataTable
      :title="dealRateTitle"
      :table-data="dealRateData"
      :columns="dealRateColumns"
      style="display: inline-block; margin-left: 99px"
    />
    <!-- 供货商成交率 -->
    <DataTable
      :title="supplierTitle"
      :table-data="supplierData"
      :columns="supplierColumns"
      style="display: inline-block; margin-left: 99px"
    />
    <br />
    <br />
    <br />
    <el-text size="large" type="primary">产品统计</el-text>
    <br />
    <br />
    <!-- 产品销量排行 -->
    <DataTable
      :title="productSalesTitle"
      :table-data="productSalesData"
      :columns="productSalesColumns"
      style="display: inline-block; margin-left: 99px"
    />
    <!-- 销售品类（产品分类） -->
    <DataTable
      :title="productCategoryTitle"
      :table-data="productCategoryData"
      :columns="productCategoryColumns"
      style="display: inline-block; margin-left: 99px"
    />
  </div>
</template>

<style lang="scss" scoped></style>
